<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>عميل جديد</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
        <link rel="shortcut icon" href="img/favicon.ico">
        <style>
            td, th {
                text-align: center !important;
            }
            .clear {
                padding-top: 10px;
            }
        </style>
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
            $(document).ready(function(){
                $('.icon-remove, .remove').click(function(e){
                    //ask the use for the confirm
                    var response = confirm('Are you sure?');
                    //check if the user confirmed
                    if(response){
                        //check if this is the image or the link
                        if($(this).hasClass('remove')){
                            //remove the table row
                            $(this).parent().parent().remove();
                        } else {
                            //remove the table row
                            $(this).parent().parent().parent().remove();
                        }
                    }
                    e.preventDefault();
                });
            });
        </script>
    </head>
    <body>
        <div class="container" style="direction: rtl;">
            <!-- start of the navigation bar -->
           <div class="navbar">
                <div class="navbar-inner">
                    <div class="container">
                        <ul class="nav pull-right">
                            <li class="divider-vertical"></li>
                            <li><a href="#">المخازن</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="#">المنتجات</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="supplier.html">الموردين</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="customer.html">العملاء</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="index1.html">الفواتير الوارده</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="index.html">الفواتير</a></li>
                            
                        </ul>
                    </div>
                </div>
            </div>
            <!-- end of the navigation bar -->

            <!-- start of the form notifications -->
            <div class="alert alert-error">
                <button class="close" data-dismiss="alert">×</button>
                <strong>خطأ!</strong> يجب أدخال سعر الوحده.
            </div>
            <div class="alert">
                <button class="close" data-dismiss="alert">×</button>
                <strong>تحذير!</strong> يجب أدخال سعر الوحده.
            </div>
            <div class="alert alert-success">
                <button class="close" data-dismiss="alert">×</button>
                تم بنجاح
            </div>
            <!-- end of the form notifications -->

            <!-- start of the login form -->
            <form class="well form-inline" action="#" method="post">
                <label style="padding-left: 10px;" for="input01">اسم المورد</label>
                <input id="input01" type="text" class="span3" placeholder="اسم المورد">
                <div class="clear"></div>
                <label style="padding-left: 10px;" for="input02">كود المورد</label>
                <input id="input02" type="text" class="span3" placeholder="كود المورد">
                <div class="clear"></div>
                <label style="padding-left: 32px;" for="select01">الدوله</label>
                <select id="select01" style="width: 270px;">
                    <option>الدوله</option>
                    <option>الدوله</option>
                    <option>الدوله</option>
                    <option>الدوله</option>
                    <option>الدوله</option>
                </select>
                <a style="padding-right: 32px;" title="" href="#">إضافة دوله جديده</a>
                <div class="clear"></div>
                <button type="submit" class="btn-primary btn">اضافه</button>
            </form>
            <!-- end of the login form -->

            <!-- start of the table -->
            <table class="table table-condensed table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>الأسم</th>
                        <th>الدوله</th>
                        <th>الرصيد</th>
                        <th>الفواتير</th>
                        <th>تعديلات</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td><input type="text" value="الأسم" disabled="disabled"></td>
                        <td>
                            <select disabled="disabled">
                                <option>الدوله</option>
                                <option>الدوله</option>
                                <option>الدوله</option>
                                <option>الدوله</option>
                                <option>الدوله</option>
                            </select>
                        </td>
                        <td><input type="text" value="الرصيد" disabled="disabled"></td>
                        <td><a href="#" title="عرض"><i class="icon-list-alt"></i> عرض</a></td>
                        <td><a href="#" title="حذف" class="remove"><i class="icon-remove"></i> حذف</a> <a href="#" title="تعديل"><i class="icon-edit"></i> تعديل</a></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td><input type="text" value="الأسم" disabled="disabled"></td>
                        <td>
                            <select disabled="disabled">
                                <option>الدوله</option>
                                <option>الدوله</option>
                                <option>الدوله</option>
                                <option>الدوله</option>
                                <option>الدوله</option>
                            </select>
                        </td>
                        <td><input type="text" value="الرصيد" disabled="disabled"></td>
                        <td><a href="#" title="عرض"><i class="icon-list-alt"></i> عرض</a></td>
                        <td><a href="#" title="حذف" class="remove"><i class="icon-remove"></i> حذف</a> <a href="#" title="تعديل"><i class="icon-edit"></i> تعديل</a></td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td><input type="text" value="الأسم" disabled="disabled"></td>
                        <td>
                            <select disabled="disabled">
                                <option>الدوله</option>
                                <option>الدوله</option>
                                <option>الدوله</option>
                                <option>الدوله</option>
                                <option>الدوله</option>
                            </select>
                        </td>
                        <td><input type="text" value="الرصيد" disabled="disabled"></td>
                        <td><a href="#" title="عرض"><i class="icon-list-alt"></i> عرض</a></td>
                        <td><a href="#" title="حذف" class="remove"><i class="icon-remove"></i> حذف</a> <a href="#" title="تعديل"><i class="icon-edit"></i> تعديل</a></td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td><input type="text" value="الأسم" disabled="disabled"></td>
                        <td>
                            <select disabled="disabled">
                                <option>الدوله</option>
                                <option>الدوله</option>
                                <option>الدوله</option>
                                <option>الدوله</option>
                                <option>الدوله</option>
                            </select>
                        </td>
                        <td><input type="text" value="الرصيد" disabled="disabled"></td>
                        <td><a href="#" title="عرض"><i class="icon-list-alt"></i> عرض</a></td>
                        <td><a href="#" title="حذف" class="remove"><i class="icon-remove"></i> حذف</a> <a href="#" title="تعديل"><i class="icon-edit"></i> تعديل</a></td>
                    </tr>
                </tbody>
            </table>
            <!-- end of the table -->
        </div>
        <!-- end of the container -->
    </body>
</html>